<template>
  <view :class="type !== 0 ? 'gray-scale' : ''" class="card flex mt-[20rpx]" >
    <view class="left text-center">
      <view class="pt-[36rpx] text-[#ff2c3c]">
        <text class="text-2xl text-semibold" v-if="item.amount<9999">￥</text
        ><text class="text-[40rpx] text-semibold">{{ item.amount>9998?'免费':item.amount }}</text>
      </view>
      <view class="pt-[8rpx] pb-[32rpx] text-muted text-[24rpx] truncate" >
        {{ item.coupon_describe }}</view
      >
    </view>

    <view class="right flex-1 px-[20rpx] pt-[20rpx] bg-white" style="width: calc(100% - 180rpx);">
      <!-- <u-image class="img" :src="item.imageAddress" width="140" height="95" /> -->

      <div style="    display: flex;
    flex-direction: column;
    justify-content: space-between;width: calc(100%);" class="title text-lg text-[#333] font-medium pb-[16rpx] truncate">
        <view >{{
        item.name
      }}</view>
        <view v-if='ifcontent == false' style="display: flex;    justify-content: space-between;">
            <div @click="ifcontent = !ifcontent" >
                查看规则 <u-icon style="margin-left: 6rpx;" name="arrow-down" size="24"></u-icon>
            </div>

            <div @click='clickcoupon_describe(item)' style="font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 26px;
                width: 62px;
                height: 24px;
                background-image: url(http://mzd-admin.muzhandao.com/api/uploads/image/20240905/0ae10729-f13c-42d1-b140-9d0c8b8c647b.png);
                background-size: 100% 100%;">
            去使用
        </div>
        </view>
       <view @click="ifcontent = !ifcontent"  v-if='ifcontent == true' style="white-space:normal;" >
        
            {{
                item.content
            }}<u-icon style="margin-left: 6rpx;" name="arrow-up" size="24"></u-icon>
       
        
       </view>
      </div>
      <view class="flex justify-between">
        <view
          class="date text-xs text-[#666] py-[11rpx]"
          :class="{ 'w-[307rpx] break-all': showBtn }"
        >
          <view
            v-if="item.is_countdown && timeStamp >= 0"
            class="text-[#ff2c3c] flex"
          >
            即将过期，仅剩余
			

            <u-count-down
              :timestamp="timeStamp"
              format="HH:mm:ss"
              :font-size="24"
              :separator-size="26"
              @end="timeStamp = 0"
            />
          </view>
          <text v-else>{{ item.use_time_desc }}</text>
        </view>

        <view v-if="showBtn" class="btns flex-1">
          <!-- 1-立即领取;2-继续领取;3-已领完; -->
          <button
            class="btn-one text-[#ff2c3c] bg-white"
            v-if="item.btn !== 3 && showDoneBtn"
            @click="goPage"
          >
            去使用
          </button>
          <button
            class="btn-two bg-[#ff2c3c] text-white"
            v-if="item.btn === 1 && !showDoneBtn"
            @click="toReceive(item.id)"
          >
            立即领取
          </button>
          <button
            class="btn-two bg-[#ff2c3c] text-white"
            v-if="item.btn === 2 && !showDoneBtn"
            @click="toReceive(item.id)"
          >
            继续领取
          </button>
          <button
            class="btn-three bg-[#ccc] text-white"
            v-if="item.btn === 3"
            disabled
          >
            已领完
          </button>
        </view>

        <view v-if="showSelect" class="flex-1">
          <u-radio-group v-model="selectCoupon" @change="radioGroupChange">
            <u-radio active-color="#F36161" :name="1"> </u-radio>
          </u-radio-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
const ifcontent = ref(false);
import { computed, ref, watchEffect } from "vue";
// import { apiReceiveCoupon } from '@/api/coupon'

const props = withDefaults(
  defineProps<{
    item: any;
    type?: number | undefined | string; // 状态:1-未使用;2-已使用;3-已过期
    showBtn?: boolean; // 是否显示按钮
    showSelect?: boolean; // 是否显示可选框
    modelValue: number;
  }>(),
  {
    item: {},
    type: 0,
    showBtn: true,
    showSelect: false,
    modelValue: 0,
  }
);

const timeStamp = ref<number | string | undefined>();
const StartTime = Date.now() / 1000;
const EndTime = +props.item.invalid_time;
watchEffect(() => {
  timeStamp.value = Math.floor(EndTime - StartTime) * 1000;
});

const isShow = ref(false);

const selectCoupon = computed(() => {
  return props.modelValue;
});
// 去领优惠券
const showDoneBtn = ref(false);
const toReceive = async (id) => {
  // try {
  //     await apiReceiveCoupon({ id })
  //     uni.$u.toast('领取成功')
  //     showDoneBtn.value = true
  // } catch (error) {
  //     uni.$u.toast(error)
  // }
};

const radioGroupChange = (e) => {
  console.log("e", e);
};

// 页面跳转
const goPage = () => {
  uni.navigateTo({
    url: "/pages/index/index",
  });
};


// 页面跳转
const clickcoupon_describe = (e:any) => {
  console.log("eeeeeeeee", e);
 /*  if(e.use){
		uni.$emit("coupon", e);
		uni.navigateBack();
  } */
  uni.navigateTo({
        url: `components/infolist?id=${e.id}`,
    });
};


</script>

<style lang="scss" scoped>
.card {
  -webkit-mask-image: radial-gradient(
      circle at 178rpx 10rpx,
      transparent 10rpx,
      red 11rpx
    ),
    radial-gradient(closest-side circle at 50%, red 99%, transparent 100%);
  -webkit-mask-size: 100%, 4rpx 8rpx;
  -webkit-mask-repeat: repeat, repeat-y;
  -webkit-mask-position: 0 -10rpx, 175rpx;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  .left {
    box-sizing: border-box;
    width: 180rpx;
    background: linear-gradient(to right, #ff2c3c 11rpx, white 15rpx);

    border-top-left-radius: 14rpx;
    border-bottom-left-radius: 14rpx;
  }
  .right {
    position: relative;
    display: flex;
    .img {
      margin-right: 5px;
    }
    .btn-one,
    .btn-two,
    .btn-three {
      height: 52rpx;
      line-height: 52rpx;
      border-radius: 9999rpx;
      border: 1rpx solid #ff2c3c;
      font-weight: 400;
      font-size: 24rpx;
    }
    .btn-three {
      border: 1rpx solid #ccc;
    }
    .footer {
      border-top: 1px solid #eaeaea;
    }
  }
}
.gray-scale {
  filter: grayscale(1);
}
</style>
